<template>
  <div class="cov-list">
    <div class="title">{{ names }}疫情列表数据</div>
    <div ref="CovListf">
      <van-row gutter="1" class="cov-row">
        <van-col span="4">
          <div class="cov-title">地区</div>
        </van-col>
        <van-col span="4">
          <div class="cov-title">现存确诊</div>
        </van-col>
        <van-col span="4">
          <div class="cov-title">累计确诊</div>
        </van-col>
        <van-col span="4">
          <div class="cov-title">死亡</div>
        </van-col>
        <van-col span="4">
          <div class="cov-title">治愈</div>
        </van-col>
        <van-col span="4">
          <div class="cov-title">疫情</div>
        </van-col>
      </van-row>
    </div>
    <!--数据-->
    <div ref="covInfo">
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item v-for="items in retdata" :key="items.name" :name="items.name">
          <template #title>
            <van-row
                gutter="2"
                class="cov-row cov-bg"
            >
              <van-col span="4">
                <div class="item itemname">
                  <img v-if="items.city.length" :class="activeNames == items.name? 'itemnno' : 'itemarrow'" id="itemarr"
                       src="../../assets/images/play.png" alt="">
                  <p :style="{'margin-left':items.city.length?'':'0.4rem'}">
                    {{ items.name }}
                  </p>
                </div>
              </van-col>
              <van-col span="4">
                <div class="item ">{{ items.econNum }}</div>
              </van-col>
              <van-col span="4">
                <div class="item">{{ items.value }}</div>
              </van-col>
              <van-col span="4">
                <div class="item">{{ items.deathNum }}</div>
              </van-col>
              <van-col span="4">
                <div class="item">{{ items.cureNum }}</div>
              </van-col>
              <van-col span="4" >
                <div class="item">
                  <a href="##" style="color: #029cdb">详情</a>
                  <van-icon name="arrow" color="#029cdb"/>
                </div>
              </van-col>
            </van-row>
          </template>

          <template #right-icon>
            <i></i>
          </template>

          <!--展开内容-->
          <van-row
              gutter="2"
              class="cov-rowno cov-no"
              v-for="cname in items.city"
          >
            <van-col span="4">
              <div class="item ">
                {{ cname.name }}
              </div>
            </van-col>
            <van-col span="4">
              <div class="item ">{{ cname.econNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ cname.conNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ cname.deathNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ cname.cureNum }}</div>
            </van-col>

          </van-row>

        </van-collapse-item>
      </van-collapse>
    </div>
    <!--    <div class="colist" ref="colist">-->
    <!--      <van-row gutter="1" class="cov-row">-->
    <!--        <van-col span="4">-->
    <!--          <div class="cov-title">地区</div>-->
    <!--        </van-col>-->
    <!--        <van-col span="4">-->
    <!--          <div class="cov-title">现存确诊</div>-->
    <!--        </van-col>-->
    <!--        <van-col span="4">-->
    <!--          <div class="cov-title">累计确诊</div>-->
    <!--        </van-col>-->
    <!--        <van-col span="4">-->
    <!--          <div class="cov-title">死亡</div>-->
    <!--        </van-col>-->
    <!--        <van-col span="4">-->
    <!--          <div class="cov-title">治愈</div>-->
    <!--        </van-col>-->
    <!--        <van-col span="4">-->
    <!--          <div class="cov-title">疫情</div>-->
    <!--        </van-col>-->
    <!--      </van-row>-->
    <!--    </div>-->
    <TipCoList/>
  </div>

</template>

<script>
import TipCoList from "./TipCoList";

export default {
  data() {
    return {
      activeNames: '',//默认展开的位置
    };
  },
  props: {
    retdata: Array,
    names: String
  },
  components: {
    TipCoList
  }

};
</script>

<style scoped>
.cov-list {
  padding: 0.16rem;
  margin-top: 0.2rem;
}


.cov-list .title {
  margin-bottom: 0.3rem;
  font-size: 0.3rem;
  font-weight: bold;
  color: #666;
}

.cov-list .title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.26rem;
  margin-right: 0.1rem;
}

.cov-list .cov-row {
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.26rem;
}

.cov-list .cov-row .van-col:nth-child(1) .cov-title {
  background: #e3e7f3;
}

.cov-list .cov-row .van-col:nth-child(2) .cov-title {
  background: #f3bab0;
}

.cov-list .cov-row .van-col:nth-child(3) .cov-title {
  background: #e69a8d;
}

.cov-list .cov-row .van-col:nth-child(4) .cov-title {
  background: #b4c0d5;
}

.cov-list .cov-row .van-col:nth-child(5) .cov-title {
  background: #95db9a;
}

.cov-list .cov-row .van-col:nth-child(6) .cov-title {
  background: #e3e7f3;
}


.cov-list .cov-bg .item {
  background: #f7f7f7;
  font-size: .24rem;

}

.cov-list .cov-bg .itemname {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cov-list .cov-bg .itemname .itemarrow {
  transform: rotate(-90deg);

}

.cov-list .cov-bg .itemname .itemnno {
  transform: rotate(0);

}

.cov-list .cov-bg .item img {
  height: 0.10rem;
  margin: 0 0.15rem;

}

.cov-list .cov-rowno {
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.26rem;
  border-bottom: 0.005rem solid #ebebeb;
}

.cov-list .cov-no .item {
  background: #ffffff;
  font-size: .24rem;

}

/deep/ .van-cell {
  padding: 0;

}

/deep/ .van-collapse-item__content {
  padding: 0;
}

</style>
